@charset "utf-8";

@import "reset";
@import "common";

@function r($px) {
  @return $px/50px * 1rem;
}

.web {
  section {
    .kv {
      .dt {
        width: r(640px);
        height: r(357px);
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
        }
        .mask {
          width: r(640px);
          height: r(104px);
          background-color: rgba(0, 0, 0, 0.3);
          position: absolute;
          bottom: 0;
          font-size: 0;
          p {
            width: r(560px);
            height: r(28px);
            font-size: r(26px);
            line-height: r(28px);
            color: white;
            margin: r(20px) r(32px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span {
            font-size: r(18px);
            color: white;
            margin: 0 r(24px);
            i {
              font-size: r(18px);
              color: white;
            }
          }
          #dataa {
            font-size: r(24px);
            text-align: right;
            margin-top: r(-8px);
          }
        }
      }
      .page {
        ul {
          font-size: r(16px);
          position: absolute;
          top: r(330px);
          left: 50%;
          transform: translateX(-50%);
          li {
            border: r(6px) solid #cdbeb2;
            border-radius: 50%;
            margin: 0 r(6px);
            &.active {
              border-color: #b60005;
            }
          }
        }
      }
    }

    .kimin {
      width: r(640px);
      height: r(608px);
      margin-top: r(26px);
      background: white;
      overflow: hidden;
      .kimin_top {
        width: r(580px);
        height: r(110px);
        margin: 0 auto;
        border-bottom: r(1px) solid #e2e2e2;
        .kimin_one {
          widows: 100%;
          height: r(62px);
          margin-top: r(26px);
          .kone_tx {
            width: r(58px);
            height: r(58px);
            background: #898989;
            border-radius: 50%;
          }
          .kone_kimin {
            margin-left: r(12px);
            h3 {
              font-size: r(28px);
              color: #898989;
            }
            p {
              font-size: r(18px);
              color: #d4d4d4;
            }
          }
          a {
            .yubm {
              width: r(230px);
              height: r(58px);
              color: white;
              background: #b20000;
              font-size: r(28px);
              text-align: center;
              line-height: r(58px);
              i {
                display: inline-block;
                width: r(25px);
                height: r(25px);
                border-radius: 50%;
                background: white;
                color: #b20000;
                font-size: r(26px);
                line-height: r(30px);
                transform: rotate(270deg);
              }
            }
          }
        }
        .kimin_two {
          width: 100%;
          height: r(28px);
          line-height: r(26px);
          margin-top: r(10px);
          span {
            font-size: r(26px);
          }
        }
      }
      .kimin_bottom {
        width: r(580px);
        height: r(434px);
        overflow: hidden;
        margin: 0 auto;
        padding: r(28px) 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .more {
      width: r(640px);
      background: white;
      p {
        width: r(582px);
        border-top: 1px solid #e0e0e0;
        margin: 0 auto;
        font-size: r(22px);
        text-align: center;
        padding: r(20px) 0;
        color: #bbbbbb;
      }
    }
  }
}
